<template>
    <div class="practice-paper-list" v-if="paperList.length" v-loading="loading">
        <div class="item" v-for="item in paperList" :key="item.paperId">
            <div class="title"><svg-icon class-name="learn-practice-icon" icon-class="learn-practice-paper"></svg-icon>
                <span>{{ item.paperName }}</span>
            </div>
            <div class="btn">
                <el-button type="primary" @click="doExercises(item)">开始做题</el-button>
            </div>
        </div>
    </div>
    <el-empty v-else description="暂无数据" />
</template>

<script setup>
import { getToken } from '@/utils/auth'
import { getPaperList, createExamRecord } from '@/api/learn/practice.js'
import { EXAM_MODEL } from '@/const/exam'

const loading = ref(false)
const paperList = ref([])

const props = defineProps({
    paperType: {
        type: [String, Number],
        default: EXAM_MODEL.PRACTICE
    }
})

function getPracticeList() {
    loading.value = true
    getPaperList({
        type: props.paperType
    }).then(res => {
        paperList.value = res.rows
        loading.value = false
    }).catch((err) => {
        console.error(err)
        loading.value = false
    })
}
getPracticeList()

function doExercises(row) {
    console.log(row);
    loading.value = true
    createExamRecord(row.paperId).then(res => {
        if (res && res.data) {
            const recordId = res.data
            const url = `${import.meta.env.VITE_APP_EXAM_URL}?model=${props.paperType}&paperId=${row.paperId}&recordId=${recordId}&t=${getToken()}`
            window.open(url, 'target');
        }
        loading.value = false
    }).catch(error => console.error(error))

}

defineExpose({
    getPracticeList
})
</script>
<style scoped lang="scss">
.practice-paper-list {
    .item {
        border-radius: 8px;
        border: 1px solid #DDDDDD;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 44px 22px 32px;
        margin-bottom: 20px;

        .title {
            .learn-practice-icon {
                display: inline-block;
                vertical-align: middle;
                width: 32px;
                height: 34px;
                margin-right: 23px;
            }

            span {
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }
        }


        .btn {}
    }


}
</style>